﻿<html>

<head>
    <title>OpenGlobus - Earth planet</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="../../css/og.css" type="text/css" />
</head>

<body>
    <div id="globus" style="width:100%;height:100%"></div>
    <div style="position: absolute; left:0; padding:10px;">
        <button id="btnOSM" style="float:left; margin: 3px;">OSM</button>
        <button id="btnMQS" style="float:left; margin: 3px;">MapQuest Sat.</button>
    </div>
    <script type="module">

        import { Globe } from '../../src/og/Globe.js';
        import { GlobusTerrain } from '../../src/og/terrain/GlobusTerrain.js';
        import { XYZ } from '../../src/og/layer/XYZ.js';

        document.getElementById("btnOSM").onclick = function () {
        osm.setVisibility(true);
        };

        document.getElementById("btnMQS").onclick = function () {
        sat.setVisibility(true);
        };

        let osm = new XYZ("OpenStreetMap", {
        specular: [0.0003, 0.00012, 0.00001],
        shininess: 20,
        diffuse: [0.89, 0.9, 0.83],
        isBaseLayer: true,
        url: "//{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
        visibility: true,
        attribution: 'Data @ OpenStreetMap contributors, ODbL'
        });

        let sat = new XYZ("MapQuest Satellite", {
        shininess: 20,
        specular: [0.00048, 0.00037, 0.00035],
        diffuse: [0.88, 0.85, 0.8],
        ambient: [0.15, 0.1, 0.23],
        isBaseLayer: true,
        url: "https://api.mapbox.com/styles/v1/mapbox/satellite-v9/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoibWdldmxpY2hzY2FuZXgiLCJhIjoiY2pwcGdsaXlnMDQzdDQybXhsOWZlbXBvdSJ9.fR2YE-ehJA4iajaJBAPKvw",
        visibility: false,
        attribution: `@2014 MapQuest - Portions @2014 "Map data @
        <a target="_blank" href="//www.openstreetmap.org/">OpenStreetMap</a> and contributors,
        <a target="_blank" href="//opendatacommons.org/licenses/odbl/"> CC-BY-SA</a>"`
        });

        let globus = new Globe({
        "target": "globus",
        "name": "Earth",
        "terrain": new GlobusTerrain(),
        "layers": [osm, sat]
        });
    </script>
</body>

</html>